<template>
  <div class="template-conteainer">
    <Header content="选择模板">选择模板</Header>
    <div class="template-list">
      <div
        class="template-item"
        v-for="(temp, index) in templateList"
        :key="temp.id"
      >
        <img :src="temp.imgUrl" alt="" />
        <div class="mask"></div>
        <el-button class="check-button" @click="checkTemplate(index)"
          >使用此模板</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header.vue'
export default {
  data() {
    return {
      templateList: [
        {
          id: '1',
          imgUrl: '/static/template-img/temp01.png',
          templateName: 'TemplateTopAndBottom',
        },
        {
          id: '2',
          imgUrl: '/static/template-img/temp02.png',
          templateName: 'TemplateLeftAndRight',
        },
      ],
    }
  },
  methods: {
    // 选择模板
    checkTemplate(index) {
      let curTemplateName = this.templateList[index].templateName
      // 在仓库里记录模板名称
      this.$store.commit('setCurrentTemplateName', curTemplateName)
      // 在本地存储读取该名称的简历数据
      const tempUserInfo =
        JSON.parse(
          localStorage.getItem(this.templateList[index].templateName)
        ) || {}
      // 在仓库存储该名称的简历数据
      this.$store.commit('setResumeInfo', {
        templateName: curTemplateName,
        resumeInfo: tempUserInfo,
      })

      // 跳转路由
      this.$router.push({
        name: 'resume',
        params: {
          templateName: curTemplateName,
        },
      })
    },
  },
  components: {
    Header,
  },
}
</script>

<style lang="less" scoped>
.template-conteainer {
  width: 100%;

  .template-list {
    width: 100%;
    height: 100%;
    display: flex;
    margin-top: 20px;
    background-color: rgb(182, 223, 211);
    padding: 20px;
  }
  .template-item {
    margin-left: 20px;
    width: 465px;
    height: 658.359px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .check-button {
      width: 150px;
      height: 50px;
      position: absolute;
      left: calc(50% - 75px);
      bottom: 10px;
      background-color: rgb(22, 25, 30);
      color: #fff;
      border: none;
      display: none;
      font-size: 18px;
    }

    .mask {
      position: absolute;
      background: rgba(101, 101, 101, 0.3);
      color: #ffffff;
      opacity: 0;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
  }

  .template-item:hover .mask {
    opacity: 1;
  }

  .template-item:hover .check-button {
    display: block;
  }
}
</style>
